<template>
  <div style=" padding: 15px;">
    <div>
      <div style="margin-top: 15px;margin-bottom: 15px;display: flex;justify-content: center">
        <div  style="flex: 1">
          <el-input placeholder="请输入车牌号" v-model="s" class="input-with-select" style="width: 200px"> </el-input>
          <el-button type="primary" icon="el-icon-search" >查询</el-button>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible=true" >添加</el-button>
        </div>
      </div>
    </div>
    <UTable ref="mTable" :search-api="getDistributionPage" :columns="columns" />
    <el-dialog title="编辑配送点" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="addressFrom" :label-position="right"  label-width="90px">
        <el-form-item label="联系人" >
          <el-col :span="11">
            <el-input v-model="addressFrom.name" autocomplete="off" placeholder="请输入联系人姓名"></el-input>
          </el-col>
          <el-col :span="11" style="margin-left: 15px">
            <el-input v-model="addressFrom.phone" autocomplete="off" placeholder="请输入联系人电话"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="紧急联系人">
          <el-col :span="11">
            <el-input v-model="addressFrom.urgentName" autocomplete="off" placeholder="请输入紧急联系人姓名"></el-input>
          </el-col>
          <el-col :span="11" style="margin-left: 15px">
            <el-input v-model="addressFrom.urgentphone" autocomplete="off" placeholder="请输入紧急联系人电话"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" >
          <div  style="display: flex;justify-content: center;width: 100%;border-bottom: 1px solid #e6e6e6;" @click="ampvisible=true"><label style="flex: 1;font-size: 12px;color: #606266">{{!addressFrom.location?'请选择地址':addressFrom.location}}</label><span class="iconfont icon-dangdifill"></span></div>
        </el-form-item>
        <el-form-item label="祥细地址" >
          <el-input  type="textarea"  :rows="2" placeholder="请输入内容" v-model="addressFrom.address"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="ampvisible" v-if="ampvisible" width="800px" class="dialog_1">
      <SelectAddress :address.sync="address"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSelect">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>
<script>
  import UTable from '@/components/UTable'
  import {getDistributionPage, edit} from '@/api/address'
  import SelectAddress from '@/components/SelectAddress'

  export default {
    components: {
      UTable, SelectAddress
    },
    data() {
      return {
        address:null,
        ampvisible:false,
        addressFrom:{
          type:2
        },
        dialogFormVisible:false,
        getDistributionPage:getDistributionPage,
        columns: [
          { type: 'index', width: 60 },
          { type: 'selection', width: 60 },
          { prop: 'name', label: '姓名' },
          { prop: 'phone', label: '联系电话'},
          { prop: 'urgentName', label: '紧急联系人'},
          { prop: 'urgentphone', label: '紧急联系人电话' },
          { prop: 'location', label: '地址'},
          { type: 'handle', fixed: 'right', buttons: [
              { text: '编辑', type: 'ifno' },
              { text: '定位', type: 'ifno' },
              { text: '启用', type: 'danger', isShow: function(row, rowIndex) { return row.status === 0 } },
              { text: '禁用', type: 'danger', isShow: function(row, rowIndex) { return row.status === 0 } }
            ]
          }
        ]
      }
    },
    methods:{
      save(){
        edit(this.addressFrom).then(res=>{
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$refs.mTable.refresh()
          this.dialogFormVisible=false
        })
      },
      onSelect(){
        if(this.address){
          if(!this.address.adecode){
            this.$message({
              message: '请选择城市',
              type: 'success'
            })
              return
          }
          this.addressFrom.adecode=this.address.adecode
          this.addressFrom.location=this.address.address+this.address.name
          this.addressFrom.latitude=this.address.lat
          this.addressFrom.longitude=this.address.lng
          this.ampvisible=false
        }else {
          this.$message({
            message: '请选择地址',
            type: 'success'
          })
        }



      }
    }
  }
</script>

<style >

</style>
